<template>
	<view class="setUp" :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back" title="我的信息" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="$lizhao.lznavigate.lzNavigateBack()"></uni-nav-bar>
		<u-cell-group class="theme-bg" :border="false">
			<u-cell-item hover-class="theme-bg-active" label="由自己编辑,部分内容展示在对外的信息,如昵称、头像等" :arrow="false">
				<view slot="title" style="font-size: 22px;margin-bottom: 15px;">个人信息</view>
			</u-cell-item>
		</u-cell-group>
		<u-cell-group class="theme-bg" :border="false">
			<u-cell-item title="头像" hover-class="theme-bg-active" :arrow="false" @click="showActionSheet">
				<view slot="right-icon" class="right-icon" @click.stop="seeHeader">
					<u-avatar  :src="GLOBAL.image_svr+JSON.parse(userInfo).photo"  size="80" ></u-avatar>
					<uni-icons type="arrowright" color="#9a9a9a" ></uni-icons>
				</view>
			</u-cell-item>
			<u-cell-item title="昵称" hover-class="theme-bg-active" :value="JSON.parse(userInfo).name" @click="cellItemClick(1)"></u-cell-item>
			<u-cell-item title="电话" hover-class="theme-bg-active" :value="JSON.parse(userInfo).phone" @click="cellItemClick(2)"></u-cell-item>
			<u-cell-item title="个人实人认证" hover-class="theme-bg-active" ></u-cell-item>
			<u-cell-item title="更多" hover-class="theme-bg-active"></u-cell-item>
		</u-cell-group>
		<!-- 对话框 -->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :value="dialog.value" :title="dialog.title" :placeholder="dialog.placeholder" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-no-network></u-no-network>
	</view>
	
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		components:{
			uniPopupDialog
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				dialog:{//弹出对话框
					title:'',
					placeholder:'',
					value:'',
					key:''
				}
			}
		},
		onLoad(e) {
			that = this
			uni.$off('lzAvatarCropper')
			uni.$on('lzAvatarCropper',(path)=>{
				console.log(path);
				uni.showLoading({
					title: '上传中...',
					mask: false
				});
				//图片上传
				that.uploadPhoto(path)
			})
		},
		methods: {
			...mapActions(['set_userInfo']),
			//点击每一行
			cellItemClick(index){
				that.$refs.dialogInput.open()
				if(index==1){//修改昵称
					that.dialog={
						title:'修改昵称',
						placeholder:'请输入昵称',
						value:JSON.parse(that.userInfo).name,
						key:'name'
					}
				}else if(index==2){
					that.dialog={
						title:'修改电话',
						placeholder:'请输入电话',
						value:JSON.parse(that.userInfo).phone,
						key:'phone'
					}
				}
			},
			//点击确认弹框
			dialogInputConfirm(fn,item){
				if(item.length==0){
					that.$refs.dialogInput.close()
					uni.showToast({
						title: '内容不能为空',
						icon:'none'
					});
					return
				}
				let req={
					[that.dialog.key]:item,
					id:JSON.parse(that.userInfo).id
				}
				that.GLOBAL.doGet(that.api.GLOBAL_rest_webSocket_chat_updateUserInformation,req).then(res=>{
					if(res.code=='0'){
						uni.showToast({
							title: res.data,
							icon:'none'
						});
						that.$refs.dialogInput.close()
						//获取用户信息
						that.getReceiveInfoFn()
					}
				})
			},
			//选取头像
			showActionSheet(){
				//destWidth输出图片宽度，高等于宽，单位px
				//rectWidth 裁剪框宽度，高等于宽，单位px
				//fileType 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
				uni.navigateTo({
					url: '../../template/u-avatar-cropper/u-avatar-cropper?destWidth=400&rectWidth=200&fileType=jpg',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//图片上传
			uploadPhoto(FilePath){
				console.log(FilePath);
				//邮箱附件上传type=0  1头像 2聊天文件
				that.GLOBAL.uploadFile(that.api.GLOBAL_rest_file_upload_fileUpload,FilePath,{type:1}).then(res=>{
					uni.hideLoading()
					if(res.code==0){
						uni.showToast({
							title: res.msg,
							icon:'success'
						});
						//获取用户信息
						that.getReceiveInfoFn()
					}
				})
			},
			//获取用户信息
			getReceiveInfoFn(){
				console.log(JSON.parse(that.userInfo).id);
				that.GLOBAL.doGet(that.api.GLOBAL_rest_sys_user_findUserById,{id:JSON.parse(that.userInfo).id}).then(res=>{
					if(res.code=='0'){
						that.set_userInfo(res.data)
					}
				}).catch(err=>{
					console.log('获取用户信息失败',err);
				})
			},
			//头像浏览
			seeHeader(){
				if(JSON.parse(that.userInfo).photo){
					uni.previewImage({
						urls: [that.GLOBAL.image_svr+JSON.parse(that.userInfo).photo]
					});
				}
				return
			},
			//删除聊天记录
			deleMsgFn(){
				uni.showModal({
					content: '确定后，将删除本地聊天记录',
					success: res => {
						if(res.confirm){
							let req={
								receiveId:that.receiveId
							}
							that.$lizhao.lzsqlite.deleteChatRecord(req).then(res=>{
								console.log('删除结果',res);
								if(res.code=='0'){
									uni.showToast({
										title: '删除成功',
										icon:'success'
									});
									uni.$emit('deleteChatRecord_lz_chat',true)
								}else{
									uni.showToast({
										title: '删除失败',
										icon:'none'
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
				
			}
			
		}

	}
</script>

<style scoped lang="scss">
.setUp{
	height: 100%;
	.lz-flex{
		display: flex;padding: 15px;justify-content: space-between;align-items: center;
		
	}
	.theme-bg{
		.solt-cell-item{
			color: #c84751;text-align: center;width: 90vw;letter-spacing: 2px;
		}
		.right-icon{
			display: flex; align-items: center;
		}
	}
}
</style>
